<template>
	<view>
		<view class="u-page">
			<u-tabs class="tab-head" :list="listTab" :is-scroll="false" :current="currentTab" @change="changeTab" 
				inactive-color="#ffffff" active-color="#fcbd71" bg-color="#2B85E4"></u-tabs>
			<view v-show="currentTab === 0">
				<view class="list-head">
					<view class="u-flex">
						<view class="u-flex-3 u-text-center">
							<view class="u-flex-3 u-text-center" @tap="show = true">
								<view class="list-head-content" >{{time}}<u-icon style="font-size:20rpx" name="arrow-down-fill"></u-icon></view>
								<u-picker v-model="show" mode="time" :params="params" @confirm="confirmTime"></u-picker>
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top: 120px;">
					<view>
						<view class="qiun-columns">

							<view v-for="(item, index) in list" :key="index">
								<view class="u-flex" @click="edit(item)">
									<view class="u-flex-6" style="font-size: 50rpx; ">
										<span style="color: #2979FF; padding-left: 60rpx;" >{{item.num}}</span>
									</view>
									<view class="u-flex-6 u-text-right" style="font-size: 25rpx; ">
										<span style="padding-right: 60rpx; font-size:30rpx" >{{item.createTime}}</span>
									</view>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="currentTab === 1">
				<view class="list-head">
					<view class="u-flex">
						<view class="u-flex-3 u-text-center">
							<view class="u-flex-3 u-text-center" @tap="showYear = true">
								<view class="list-head-content" >{{timeYear}}<u-icon style="font-size:20rpx" name="arrow-down-fill"></u-icon></view>
								<u-picker v-model="showYear" mode="time" :params="paramsYear" @confirm="confirmTimeYear"></u-picker>
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top: 120px;">
					<view>
						<view class="qiun-columns">

							<view v-for="(item, index) in listYear" :key="index">
								<view class="u-flex">
									<view class="u-flex-6" style="font-size: 50rpx; ">
										<span style="color: #2979FF; padding-left: 60rpx;" >{{item.num}}</span>
									</view>
									<view class="u-flex-6 u-text-right" style="font-size: 25rpx; ">
										<span style="padding-right: 60rpx; font-size:30rpx" >{{item.showTime}}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
						
		</view>
		<!-- 自定义tabbar -->
		<xm-tabbar></xm-tabbar>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaColumn=null;
	var canvaRing=null;
	
	export default {
		data() {
			return {			
				show: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
				time: this.$u.timeFormat(new Date, "yyyy-mm-dd"),
				list:[],
				listTab: [{
						name: '日统计'
					}, {
						name: '月统计'
					}],
				currentTab: 0,
				showYear: false,
				paramsYear: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
				timeYear: this.$u.timeFormat(new Date, "yyyy-mm"),
				listYear: []
			}
		},
		onShow(){
			this.init();
		},
		methods:{
			// 修改月份
			confirmTime(val){
				this.time = this.$u.timeFormat(val.timestamp, "yyyy-mm-dd");
				this.flashData();
			},
			confirmTimeYear(val){
				this.timeYear = this.$u.timeFormat(val.timestamp, "yyyy-mm");
				this.flashDataYear();
			},
			
			
			init(){
				this.flashData();
			},
			// 修改tab
			changeTab(index){
				this.currentTab = index;
				if(this.currentTab == 0){
					this.flashData();
				}else{
					this.flashDataYear();
				}
			},
			// 重新获取数据
			flashData(type){
				this.$u.get('/milk/milkrecord/listByCondition', {
						dateDay : this.time
					}).then(data => {
						if (data && data.code === 0) {
							this.list = data.list;
							setTimeout(this.canel, 1000);
						} else {
							this.$refs.uToast.show({title: data.msg, type: 'error',});
						}
					}).catch((e) => {
						this.$refs.uToast.show({title: "手机好累哦^_^", type: 'error',});
					});
			},
			flashDataYear(type){
				this.$u.get('/milk/milkrecord/listByConditionYear', {
						dateMonth : this.timeYear
					}).then(data => {
						if (data && data.code === 0) {
							this.listYear = data.list;
							setTimeout(this.canel, 1000);
						} else {
							this.$refs.uToast.show({title: data.msg, type: 'error',});
						}
					}).catch((e) => {
						this.$refs.uToast.show({title: "手机好累哦^_^", type: 'error',});
					});
			},
			// 修改记录信息
			edit(item){
				this.$u.route({
					url : '/pages/total/edit-item',
					params : item,
				})
			},

		}
	}
</script>

<style>
.list-head{
	background-color: #2B85E4; 
	padding: 30rpx 10rpx 10rpx 10rpx;
	font: small-caps bold 25rpx serif;
	color: #FFFFFF;
	width: 100%;
	position: fixed;
	top: 42px;
	z-index: 1000;
}
.tab-head{
	width: 100%;
	height: 42px;
	position: fixed;
	top: 0;
	z-index: 1000;
}
.list-head-content{
	padding: 10rpx 0rpx 0rpx 10rpx;
	font: small-caps bold 40rpx serif;
}
.list-content-select{
	text-align: center;
	color: #fcbd71;
	/* background-color: #a0cfff; */
	-webkit-box-flex: 3;
	-webkit-flex: 3;
	flex: 3;
},
.list-content-unselect{
	text-align: center;
	color: #FFFFFF;
	/* background-color: #2B85E4; */
	-webkit-box-flex: 3;
	-webkit-flex: 3;
	flex: 3;
}
.itemclassb{
	background-color:#CCFFFF;
}
.qiun-padding{padding:2%; width:96%;}
.qiun-wrap{display:flex; flex-wrap:wrap;}
.qiun-rows{display:flex; flex-direction:row !important;}
.qiun-columns{display:flex; flex-direction:column !important;}
.qiun-common-mt{margin-top:10upx;}
.qiun-bg-white{background:#FFFFFF;}
.qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;}
.qiun-title-dot-light{border-left: 10upx solid #2979FF; padding-left: 10upx; font-size: 50upx;color: #000000}
.qiun-charts{width: 750upx; height:500upx;background-color: #FFFFFF; margin-top:30upx;}
.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
</style>